<template>
    <div class="human-container">
        <div class="header">
            <el-row>
                <el-col :offset="14" :span="6">
                    <el-input size="mini" @change="getUserList"  v-model="userName" placeholder="请输入用户姓名" clearable></el-input> 
                </el-col>
                <el-col :span="4">
                    <el-button size="mini" type="primary" @click="getUserList">查询</el-button>
                    <el-button size="mini" type="success" @click="editRow">新增</el-button>
                </el-col>
            </el-row>
            
        </div> 
        <div class="mainlist">
            <el-table
                :data="tableData"
                style="width:100%"
                max-height="730px">
                <el-table-column
                fixed
                prop="userId"
                label="账户名"
                width="150">
                </el-table-column>
                <el-table-column
                prop="userName"
                label="姓名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="userSex"
                label="性别"
                width="120">
                </el-table-column>
                <el-table-column
                prop="userDept"
                label="部门"
                width="120">
                </el-table-column>
                <el-table-column
                prop="userPhone"
                label="手机号"
                width="120">
                </el-table-column>
                <el-table-column
                prop="userEmail"
                label="邮箱"
                width="220">
                </el-table-column>
                <el-table-column
                prop="userAddress"
                label="地址"
                width="220">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="150">
                <template slot-scope="scope">
                    <el-button
                    @click="editRow('edit',scope.row)"
                    type="text">
                    <span>编辑</span>
                    </el-button>
                    <el-button
                    @click="deleteRow(scope.row)"
                    type="text">
                    <span>删除</span>
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
        
        <div class="pages">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagenum"
                :page-sizes= "[10, 30, 50, 100]"
                :page-size= "pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total= total>
            </el-pagination>
        </div>
        <div class="doSomething">
            <el-dialog :title="title" :visible.sync="show" :append-to-body="true" width="90%" :close-on-click-modal="false">
                <el-form :model="userInfo" :rules="rules" label-width="80px" class="demo-ruleForm">
                    <el-col :span="6">
                        <el-form-item label="账户号" prop="userId">
                            <el-input v-model="userInfo.userId" :readonly="isEdit"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名" prop="userName">
                            <el-input v-model="userInfo.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户部门" prop="userDept">
                            <el-select  v-model="userInfo.userDept" placeholder="请选择您的部门">
                                <el-option v-for="it in depts" :key="it" :label='it' :value="it"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="密码" prop="userPwd">
                            <el-input v-model="userInfo.userPwd" type="password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="入职日期" prop="userEntry">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="userInfo.userEntry" ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户性别" prop="userSex">
                            <el-select v-model="userInfo.userSex" placeholder="请选择您的性别">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户年龄" prop="userAge">
                            <el-input v-model="userInfo.userAge"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="用户地址" prop="userAddress">
                            <el-input v-model="userInfo.userAddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户生日" prop="userDate">
                            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="userInfo.userDate" ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户手机" prop="userPhone">
                            <el-input v-model="userInfo.userPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="用户邮箱" prop="userEmail">
                            <el-input v-model="userInfo.userEmail"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="用户备注" prop="userRemark">
                            <el-input v-model="userInfo.userRemark" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="show = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="addUserEvt" size="small">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>

import ajax from '@/util/Ajax'
    export default {
        data () {
            return {
                tableData : [],
                userName : '' ,
                total : 0,
                pagesize : 10,
                pagenum : 1,
                show: false,
                title : '新增用户',
                depts: '',
                isEdit : '',
                userInfo : {
                    userId : '',
                    userName : '',
                    userPwd : '',
                    userEntry : '',
                    userDept : '',
                    userSex : '',
                    userAge : '',
                    userAddress : '',
                    userDate : '',
                    userPhone : '',
                    userEmail : '',
                    userRemark : '',
                }, 
                rules : {
                    userId : [{required: true, message: '请输入账户名', trigger: 'blur'}],
                    userName : [{required: true, message: '请输入用户姓名', trigger: 'blur'}],
                    userPwd : [{required: true, message: '请输入用户密码', trigger: 'blur'}],
                    userEntry : [{ message: '请输入入职日期', trigger: 'blur'}],
                    userDept : [{ message: '请输入用户部门', trigger: 'blur'}],
                    userSex : [{required: true, message: '请输入用户性别', trigger: 'blur'}],
                    userAge : [{message: '请输入用户年龄', trigger: 'blur'}],
                    userAddress : [{message: '请输入用户地址', trigger: 'blur'}],
                    userDate : [{message: '请输入用户生日', trigger: 'blur'}],
                    userPhone : [{ message: '请输入用户手机', trigger: 'blur'}],
                    userEmail : [{ message: '请输入用户邮箱', trigger: 'blur'}],
                    userRemark : [{ message: '请输入用户备注', trigger: 'blur'}],
                }
            }
           
        },
        methods : {
            async getUserList () {
                let load = this.$loading();
                let res = await ajax({
                    url : '/user/list',
                    params : {
                        pageSize : this.pagesize,
                        pageNum : this.pagenum,
                        userName : this.userName
                    }
                    })
                load.close()
                console.log(res)
                if (res.code === 200) {
                    this.tableData = res.data.rows
                    this.total = res.data.total
                }else {
                    this.$message.warning('获取数据失败，请重试')
                }
            },
            handleSizeChange (val) {
                this.pagesize = val
                this.getUserList()
            },
            handleCurrentChange (val) {
                this.pagenum = val
                this.getUserList()
            },
            async deleteRow(row) {
                let id = row.userId
                let res = await ajax({
                    url : `/user/delete/${id}`,
                    method : 'post',
                })
                console.log(res)
                if (res.code === 200) {
                    this.$message.success('用户删除成功')
                    this.getUserList()
                }else {
                    this.$message.success('用户删除失败')
                }
            },
            async editRow (type,row) {
                for (let key in this.userInfo) {
                        this.userInfo[key] = ''
                    }
                this.isEdit = type === 'edit' ? true : false
                console.log(`biajji*****************${this.isEdit}`)
                this.title = this.isEdit ? '编辑用户' : '新增用户'
                console.log(row)
                if (this.isEdit) {
                    for (let key in this.userInfo) {
                        this.userInfo[key] = row[key] || ''
                    }
                }
                let res = await ajax({
                    url : '/basedata/dept'
                })
                if(res.code === 200){
                    this.depts = res.data
                }
                console.log(res)
                this.show = true
            },
            async addUserEvt () {
                let url = this.isEdit ? '/user/update' : '/user/add'
                console.log(`*****************${this.isEdit}`)
                console.log(`>>>>>>>>>>>>>${url}<<<<<<<<<<`)
                let res = await ajax ({
                    url : url,
                    method : 'post',
                    data : this.userInfo,
                })
                if (res.code === 200) {
                    this.$message.success(this.isEdit ? '修改用户成功' : '添加用户成功');
                    this.show = false
                    this.getUserList()
                }else {
                    this.$message.error(this.isEdit ? '修改用户失败' : '添加用户失败');
                }
            }

        },
        created () {
            this.getUserList()
        },

    }
</script>

<style lang="less" scoped>
    @import "@/styles/common";
    @import "@/styles/human";
    
</style>